import React, { FC } from "react"
import { useSortable } from "@dnd-kit/sortable"
import { CSS } from "@dnd-kit/utilities"

type PropsType = {
    id: string
    children: JSX.Element
}

const SortableItem: FC<PropsType> = (props: PropsType) => {
    // 子元素不一样，列表中拖拽的子元素和图层中拖拽的子元素不一样
    const { id, children } = props

    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id })

    const style = {
        transform: CSS.Transform.toString(transform),
        transition
    }

    return (
        <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
            {children}
        </div>
    )
}

export default SortableItem
